import React from 'react';
import '../static/MyActivity.scss';
import FootMenu from '../components/FootMenu/FootMenu'
import MyActivityItem from '../components/MyActivityItem/MyActivityItem'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as homeActions from '../actions/home';

import { Tabs, Modal } from 'antd-mobile';
const TabPane = Tabs.TabPane;

const alert = Modal.alert;

/**
 * 我的活动
 */
class MyActivity extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            modal:false
        }
    }

    componentDidMount() {
        this.props.actions.getMyActivityList();
    }

    showAlert = () => {
        const alertInstance = alert('商家须知', '活动下架前可以编辑，下架后则无法编辑，只能提现。活动的诚意金（定金）在提现的时候将收取10%手续费，用于支付微信手续费、公司收入营业所得税。下架后的活动页面无法显示！', [
            { text: 'OK', onPress: () => console.log('ok') },
        ]);
    };

    showModal = ()=>{
        this.setState({
            modal:true
        })
    }

    onClose = () =>{
        this.setState({
            modal:false
        })
    }

    callback = (key) => {
        console.log('onChange', key);
    }
    handleTabClick = (key) => {
        console.log('onTabClick', key);
    }


    render() {
        console.log(this.props.myActivityList);
        return (
            <div>
                <div className="MyActivity">
                        <Tabs defaultActiveKey="1" onChange={this.callback} onTabClick={this.handleTabClick}>
                            <TabPane tab={'全部'} key="1">

                                <div className="Notice">
                                    <i className="fa fa-exclamation-triangle fa-fw"></i>
                                    商家须知：<span onClick={this.showAlert}>点击查看</span>
                                </div>
                                
                                <MyActivityItem {...this.props}/>

                            </TabPane>
                            <TabPane tab={'未开始'} key="2">
                                <div className="Notice">
                                    <i className="fa fa-exclamation-triangle fa-fw"></i>
                                    商家须知：<span onClick={this.showAlert}>点击查看</span>
                                </div>
                                
                                <MyActivityItem {...this.props}/>
                            </TabPane>
                            <TabPane tab={'进行中'} key="3">
                                <div className="Notice">
                                    <i className="fa fa-exclamation-triangle fa-fw"></i>
                                    商家须知：<span onClick={this.showAlert}>点击查看</span>
                                </div>
                                
                                <MyActivityItem {...this.props}/>
                            </TabPane>
                            <TabPane tab={'已结束'} key="4">
                                <div className="Notice">
                                    <i className="fa fa-exclamation-triangle fa-fw"></i>
                                    商家须知：<span onClick={this.showAlert}>点击查看</span>
                                </div>
                                
                                <MyActivityItem {...this.props}/>
                            </TabPane>
                            <TabPane tab={'已下架'} key="5">
                                <div className="Notice">
                                    <i className="fa fa-exclamation-triangle fa-fw"></i>
                                    商家须知：<span onClick={this.showAlert}>点击查看</span>
                                </div>
                                
                                <MyActivityItem {...this.props}/>
                            </TabPane>
                        </Tabs>
                </div>
                <Modal
                title="这是 title"
                transparent
                maskClosable={false}
                visible={this.state.modal}
                onClose={this.onClose}
                footer={[{ text: '确定', onPress: () => { this.onClose; } }]}
                >
                这是内容...<br />
                这是内容...<br />
                </Modal>
                <FootMenu {...this.props}/>
            </div>
        )
    }
}


const mapStateToProps = (state) => ({
    myActivityList: state.data.myActivityList,
});

const mapDispatchToProps = (dispatch) => {
  return {
    actions:bindActionCreators(homeActions, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(MyActivity);